<template>
	<view style="min-height: 100vh;background: #fff;">
		<view class="line"></view>
		<view class="headTop">
			<view class="head-top-item">
				<view class="title">当前排名</view>
				<view class="num">{{ headData.rowNum ? headData.rowNum : '-' }}</view>
			</view>
			<view class="head-top-item">
				<image :src="headData.avatar" mode="aspectFill"></image>
				<view class="desc">{{ headData.nickName }}</view>
			</view>
			<view class="head-top-item">
				<view class="title">打卡天数</view>
				<view class="num">{{ headData.clockCount ? headData.clockCount : '-' }}</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<text class="serial">{{ item.rowNum || '' }}</text>
				<image :src="item.avatar" class="head-img" mode="aspectFill"></image>
				<text class="name">{{ item.nickName || '' }}</text>
				<text class="cont">已坚持打卡 {{ item.clockCount || 0 }} 天</text>
			</view>
		</view>
		<mix-load-more :status="loading"></mix-load-more>
	</view>
</template>

<script>
import http from '../common/request.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import { getCommonShareInfo } from '@/common/utils.js';
export default {
	components: {
		mixLoadMore
	},
	data() {
		return {
			pageNum: 1,
			pageSize: 10,
			list: [],
			headData: {},
			loading: 0
		};
	},
	onLoad(option) {
		this.planId = option.planId;
		uni.loadFontFace({
			family: 'din',
			source: 'url("https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/fonts/PTDINCondensedCyrillic.ttf")',
			success() {}
		});
	},
	onReachBottom() {
		//当划到最底部的时候触发事件
		if (this.loading != 2) {
			this.rankList();
		}
	},
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	mounted() {
		this.rankList();
	},
	methods: {
		rankList() {
			http('/api/cusThemePunchPlanInfo/rankingList/', {
				data: {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					baseEntity: {
						planId: this.planId
					}
				},
				method: 'POST'
			}).then(result => {
				if (result.code == 200) {
					let list = result.data.rows || [];
					list.forEach(item => {
						item.rowNum = (this.pageNum - 1) * this.pageSize + item.rowNum;
					});
					this.headData = result.self || {};

					if (list.length > 0) {
						this.list = this.list.concat(list); //进行数据的累加
						if (list.length === this.pageSize) {
							this.loading = 0;
							this.pageNum++; //页数的++
						} else {
							this.loading = 2;
						}
					}
					this.loading = this.list.length === 0 ? 3 : this.loading;
				}
			});
		}
		// detail() {
		// 	uni.navigateTo({
		// 		url: '/card/messageDetail',
		// 		animationType: 'pop-in',
		// 		animationDuration: 200
		// 	})
		// }
	}
};
</script>

<style lang="less" scoped>
page {
	background-color: #fff;
}
.line {
	height: 46rpx;
	background: #fff;
}
.headTop {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 40rpx;
	box-shadow: 0 4rpx 20rpx 0 rgba(102, 100, 93, 0.1);
	height: 210rpx;
	border-radius: 12rpx;
	width: 89%;
	.head-top-item {
		text-align: center;
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}
		.title {
			font-size: 26rpx;
			color: rgba(102, 100, 93, 0.6);
			line-height: 37rpx;
		}
		.num {
			font-size: 36rpx;
			color: #f39800;
			line-height: 60rpx;
			font-family: 'din';
		}
		.desc {
			font-size: 26rpx;
			color: #66645d;
			margin-top: 24rpx;
			margin-bottom: 25rpx;
			font-weight: 500;
		}
	}
}
.list {
	margin: 20rpx 40rpx 0 40rpx;
	width: 89%;
	.item {
		width: 100%;
		height: 117rpx;
		position: relative;
		// border-bottom: 1rpx solid rgba(102, 100, 93, 0.1);
		display: flex;
		align-items: center;
		&:after {
			content: '';
			background-color: #efefef;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 2rpx;
			transform: scaleY(0.5);
		}
		
		&:last-child:after {
			height: 0;
		}
		
		&:last-child {
			border: none;
		}
		.serial {
			font-size: 26rpx;
			color: #f39800;
			width: 26rpx;
			flex-shrink: 0;
		}
		.head-img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 100%;
			margin: 0 24rpx;
			flex-shrink: 0;
		}
		.name {
			font-size: 26rpx;
			color: #66645d;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			flex-grow: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.cont {
			font-size: 24rpx;
			color: #66645d;
			flex-shrink: 0;
			font-weight: 300;
			font-family: PingFangSC-Light, PingFang SC;
		}
	}
}
</style>
